<!--
 * @Author: wuzhen
 * @Date: 2020-01-13 13:45:12
 * @LastEditors: wuzhen
 * @LastEditTime: 2020-04-17 15:33:14
 * @Description: 通讯录
 -->
<template>
  <div class="chat">
    <!-- sider -->
    <chat-sider ref="chatSider" @close-user-info="onCloseUserInfo" @on-click="onDetails"></chat-sider>
    <div class="chat-con">
      <wz-load @on-reload="onReload" ref="wzLoad" v-if="isLoading" />
      <template v-else-if="!groupData.usernum && !userData.name">
        <img :src="logoChat" class="logo-img" />
      </template>
      <template v-else>
        <div class="detail-title">
          <div class="img" v-if="msgkind === 30">
            <img :src="require('@/assets/image/icon_group.png')" v-if="groupData.grouptype === 20">
            <wz-img type="group" :src="groupData.face" v-else />
          </div>
          <h2>{{msgkind === 20? $t("user_details"): `${groupData.name}  (${groupData.usernum})`}}</h2>
        </div>
        <div class="detail-info">
          <!-- 群组详情 -->
          <div class="group flex" v-if="msgkind === 30">
            <div class="group-user" v-for="(item, index) in groupData.groupMember" :key="index" @click.stop="(e) => openUserInfo(e, item)">
              <div class="user-img">
                <img :src="iconPersonal" v-if="groupData.grouptype === 20 || !item.face" style="width:100%">
                <wz-img type="face" :src="item.face" v-else />
              </div>
              <h3 class="user-name" v-if="groupData.grouptype === 20">{{$t("anonymous") + $t("user")}}{{item.annoyindex}}</h3>
              <h3 class="user-name" v-else>{{item.usernickname || item.username}}</h3>
            </div>
          </div>
          <!-- 用户详情 -->
          <div class="user" v-else>
            <div class="user-item flex">
              <div class="flex-item">
                <div class="user-info">
                  <h3 class="name">{{userData.name}}</h3>
                  <div class="sex" v-if="userData.gender>0" :style="{background:filterSexBgColor}">
                    <img :src="filterSex" alt="">
                  </div>
                  <div class="age" v-if="userData.birthday" :style="{background:filterSexBgColor}">{{userData.birthday|getAge}}{{$t("year")}}</div>
                </div>
                <p class="user-nickname" v-if="userData.username!==userData.name">{{$t("nickname")}}：{{userData.username}}</p>
              </div>
              <div class="user-img">
                <wz-img type="face" :src="userData.face" v-if="userData.face" />
                <img :src="iconPersonal" style="width:100%" v-else>
              </div>
            </div>
            <div class="user-item flex">
              <p class="flex-item">{{$t("user_id")}}：</p>
              <span>{{userData.id}}</span>
            </div>
            <div class="user-item flex">
              <p class="flex-item">{{$t("signature")}}：</p>
              <span>{{userData.personlsign || $t("signatureTips")}}</span>
            </div>
          </div>
        </div>
        <div class="send-btn">
          <Button class="custom" @click.stop="onSendMsg"><img :src="logoImg" />{{$t("btn_send")}}</Button>
        </div>
      </template>
    </div>
    <!-- 个人信息 -->
    <user-info :left="userLeft" :top="userTop" @on-close="onCloseUserInfo" ref="userInfo" v-show="showUserInfo"></user-info>
  </div>
</template>
<script>
import ChatSider from "./components/ChatSider";
import UserInfo from "@/components/UserInfo/index.vue";
import { Button } from "view-design";
export default {
  components: {
    ChatSider,
    UserInfo,
    Button
  },
  data() {
    return {
      isLoading: false,
      logoImg: require("@/assets/image/logo_btn.png"),
      logoChat: require("@/assets/image/logo_chat.png"),
      iconPersonal: require("@/assets/image/icon_personal.png"),
      groupMember: [],
      userData: {},
      groupData: {},
      userLeft: 0,
      userTop: 0,
      showUserInfo: false,
      msgkind: 30
    };
  },
  computed: {
    filterSex() {
      var gender = this.userData.gender;
      var img = "";
      switch (gender) {
        case 2:
          img = require("@/assets/image/man.png");
          break;
        case 4:
          img = require("@/assets/image/women.png");
          break;
        default:
          break;
      }
      return img;
    },
    filterSexBgColor() {
      var gender = this.userData.gender;
      var color = "rgba(0,0,0,0)";
      switch (gender) {
        case 4:
          color = "#FA5950";
          break;
        case 2:
          color = "#F8A42B";
          break;
        case 0:
          color = "#9E9E9E";
          break;
        default:
          break;
      }
      return color;
    }
  },
  filters: {
    getAge(birthday) {
      //出生时间 毫秒
      var birthDayTime = new Date(birthday).getTime();
      //当前时间 毫秒
      var nowTime = new Date().getTime();
      //一年毫秒数(365 * 86400000 = 31536000000)
      return Math.ceil((nowTime - birthDayTime) / 31536000000);
    }
  },
  created() {
    this.$bus.$on("hideBookPopup", () => {
      this.showUserInfo = false;
    });
  },
  beforeDestroy() {
    this.$bus.$off("hideBookPopup");
  },
  methods: {
    // 查看详细资料
    async onDetails(data) {
      try {
        this.dataObj = data;
        this.isLoading = true;
        this.msgkind = data.msgkind;
        switch (data.msgkind) {
          case 30:
            await this.getGroupMemberData(data.id);
            this.groupData = this.groups.find(v => v.id === data.id);
            this.isLoading = false;
            break;
          case 20:
            await this.getUserInfoData(data.id);
            this.userData = this.friends.find(v => v.id === data.id);
            this.isLoading = false;
            break;
          default:
            break;
        }
      } catch (error) {
        this.$refs["wzLoad"].isReloading();
        throw error;
      }
    },
    // 重新加载
    onReload() {
      this.onDetails(this.dataObj);
    },
    // 查看群组用户详情
    async openUserInfo(e, data) {
      if (this.groupData.grouptype === 20) return;
      this.userLeft = e.clientX - this.screen.x - 310;
      this.userTop = e.clientY - this.screen.y + 10;
      this.$refs["chatSider"].onCloseContextMenu();
      this.$bus.$emit("hideBarPopup");
      this.showUserInfo = true;
      this.$refs["userInfo"].getData(data.userid);
    },
    // 发消息
    onSendMsg() {
      let obj = {};
      if (this.msgkind === 30) {
        obj = {
          id: this.groupData.id,
          msgkind: this.msgkind
        };
      } else {
        obj = {
          id: this.userData.id,
          msgkind: this.msgkind
        };
      }
      // 修改正在聊天对象
      this.storeChatting(obj);
      // 修改正在聊天成员列表
      this.storeChatUsers(obj);
      // 跳转到聊天页面
      this.$router.push("chat");
    },
    onCloseUserInfo() {
      this.showUserInfo = false;
    }
  }
};
</script>
<style lang="less" scoped>
.chat {
  display: flex;
  height: 100%;
  &-con {
    display: flex;
    flex-direction: column;
    width: 695px;
    position: relative;
    .logo-img {
      position: absolute;
      width: 83px;
      height: 75px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .group {
      flex-wrap: wrap;
      padding: 20px 10px;
      &-user {
        text-align: center;
        cursor: pointer;
        width: 14.2%;
        margin-bottom: 30px;
        .user-img {
          margin: 0 auto;
        }
        .user-name {
          font-size: 14px;
          font-weight: normal;
          padding: 10px 0;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 65px;
          margin: 0 auto;
        }
      }
    }
    .detail {
      &-title {
        display: flex;
        align-items: center;
        padding: 0px 15px;
        border-bottom: 1px solid #e1e3e8;
        .img {
          width: 38px;
          height: 38px;
          margin-right: 10px;
          img {
            width: 38px;
            height: 38px;
          }
        }
        h2 {
          font-size: 14px;
          font-weight: normal;
          height: 51px;
          line-height: 51px;
        }
      }
      &-info {
        flex: auto;
        height: 100%;
        overflow: auto;
        font-size: 14px;
        .user {
          &-item {
            padding: 25px 0;
            border-bottom: 1px solid #e1e3e8;
            margin: 0 15px;
            align-items: center;
          }
          .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            .name {
              font-size: 14px;
            }
            .sex {
              width: 14px;
              height: 14px;
              margin-left: 5px;
              border-radius: 2px;
              > img {
                width: 100%;
                height: 100%;
              }
            }
            .age {
              height: 14px;
              line-height: 14px;
              padding: 0 3px;
              font-size: 12px;
              margin-left: 5px;
              color: #fff;
              border-radius: 2px;
            }
          }
          &-nickname {
            color: #7e7e7e;
          }
          &-img {
            width: 48px;
            height: 48px;
            background: #eee;
            border-radius: 4px;
            overflow: hidden;
          }
        }
      }
    }
    .send-btn {
      margin: 40px 0;
      text-align: center;
      .custom {
        background: linear-gradient(
          90deg,
          rgba(249, 195, 78, 1),
          rgba(248, 158, 39, 1)
        );
        width: 200px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        &:focus {
          box-shadow: none;
        }
        &:hover {
          border: none;
        }
        img {
          display: inline-block;
          width: 20px;
          height: 19px;
          position: relative;
          top: 5px;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
